<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>日志概览</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/demos/css/console1.css" />
    <link rel="stylesheet" href="/static/css/common.css" />
</head>
<body class="pear-container">
<div>

    <!--顶部概率-->
    {include file='utils/logs_view/index_top'}


    <div class="layui-row layui-col-space10">

        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>


            <!-- 日志列表 -->
            <iframe src="/admin/utils/global-log/index"
                    frameborder="no" border="0" marginwidth="0" marginheight="0"
                    style="width: 100%;height: 100%;min-height: 900px" allowfullscreen="true"></iframe>

        </div>

        <div class="layui-col-md3">
            <!--右侧汇总列表-->
            {include file='utils/logs_view/index_right'}
        </div>

    </div>
</div>
<!--</div>-->
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function() {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            count = layui.count,
            echarts = layui.echarts;


        // 开启关闭调试
        $('.debugBtn').click(function(){
            var _this = this
            var text = $(_this).html()
            var status = text == '关闭调试'?0:1;
            $.get('/admin/utils/index/opendebug',{status},function(res){
                $(_this).html(text == '关闭调试'?'开启调试':'关闭调试')
            })
        })

        // 数字渲染
        count.up("value1", {time: 2000,bit:0,regulator:50,num:{$gather['count']??0}})
        count.up("value2", {time: 2000,bit:0,regulator:50,num:{$gather['exec_time']??0}})
        count.up("value3", {time: 2000,bit:0,regulator:50,num:{$gather['post']??0}})
        count.up("value4", {time: 2000,bit:0,regulator:50,num:{$gather['500']??0}})

        table.init('projectIpList', { limit: Number.MAX_VALUE,height: 500,skin: 'line', even: true,});
        table.init('projectrequestList', { limit: Number.MAX_VALUE,height: 500,skin: 'line', even: true,});
        table.init('projecttimeList', { limit: Number.MAX_VALUE,height: 500,skin: 'line', even: true,});


        // 请求报表数据
        // if(document.getElementById('echarts-records').length>0){
            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
            $.get("/admin/utils/logsView/statistic",function(res){
                if(res.code==0){
                    let statistic  =res.data
                    statistics('请求信息', statistic.time, {'请求数':statistic.count,'平均响应':statistic.avg_exec_time}, '250,200,88', echartsRecords);
                    window.onresize = function() {
                        echartsRecords.resize();
                    }
                }
            })
        // }


    });
    function statistics(title, x, yArr, color, object) {
        const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
        var inx = 0;
        var series = []
        for(let i in yArr){
            series.push({
                name:i,
                type: 'line',
                z: 3,
                showSymbol: false,
                smoothMonotone: 'x',
                lineStyle: {
                    width: 3,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(' + color + ')' // 100% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(' + color + ')' // 0% 处的颜色
                        }]
                    },
                    shadowBlur: 4,
                    shadowColor: 'rgba(' + color + ',.2)',
                    shadowOffsetY: 4
                },
                areaStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(' + color + ',0.5)' // 100% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(' + color + ',0.1)' // 0% 处的颜色
                            }]
                        }
                    }
                },
                itemStyle: {
                    // color: 'rgba(' + color + ')'
                    color: colorList[inx]
                },
                smooth: true,
                data: yArr[i],
            })
            inx++;
        }

        var option = {
            backgroundColor: '#fff',
            title: {
                text: title,
                left: 'center'
            },

            tooltip: {
                trigger: 'axis',
                confine: true,
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                },
                position: function (point, params, dom, rect, size) {
                    return [point[0], '10%'];
                },
                extraCssText: 'width:150px;',
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 80,
                    end: 100
                },
                {
                    height: 25,
                    start: 80,
                    end: 100
                }
            ],
            grid: {
                top: '15%',
                left: '3%',
                right: '4%',
                bottom: '20%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14,
                        color: 'rgba(#999)',
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#939ab6',
                        opacity: .15
                    }
                },
                data: x
            }],
            yAxis: [{
                type: 'value',
                min: 0,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14,
                        color: '#999',
                    }
                },
                splitLine: {
                    show: false
                }

            }],
            series: series
        };

        object.setOption(option);
    }
</script>
</body>
</html>
